import { Layout } from 'antd'
import React, { useState } from 'react'
import { Outlet } from 'react-router-dom'

import CommonAside from '../components/commonAside'
import CommonHeader from '../components/commonHeader'
import CommonTag from '../components/commonTag'

import { useSelector } from 'react-redux'

const { Content } = Layout

const Main = () => {

  const collapsed = useSelector(state => state.tab.isCollapse)

  return (
    <div>
      <Layout>
        <CommonAside collapsed={collapsed} />
        <Layout className="site-layout">
          <CommonHeader collapsed={collapsed} />
          <CommonTag></CommonTag>
          <Content
            className="site-content"
            style={{
              margin: '16px 16px',
              padding: 24,
              boxSizing: 'border-box'
            }}
          >
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </div>
  )
}

export default Main
